<template>
  <view-page class="device-view">
    <!-- <HeaderView /> -->
    <div class="bg"></div>
    <div class="container">
      <div class="card" >
        <ServiceCard 
          :icon="deviceData.icon"
          :name="deviceData.name"
          :org="deviceData.org"
          className="fff"
          :style="{ backgroung: '#fff' }"
        />
      </div>

      <div class="info">
        <div class="info-item">
          <div class="info-label">项目介绍</div>
          <div class="info-desc">检测岩石样品中总有机质的百分比含量</div>
        </div>
        <div class="info-item">
          <div class="info-label">执行标准</div>
          <div class="info-tags">
            <div class="tag-item">CS230碳硫分析仪</div>
            <div class="tag-item">CS-i碳硫分析仪</div>
            <div class="tag-item">马弗炉</div>
            <div class="tag-item">电子天平</div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label">实验单位</div>
          <div class="info-desc">北京石油地质实验研究中心</div>
        </div>
        <div class="info-item">
          <div class="info-label">测试条件</div>
          <ul class="info-list">
            <li class="info-list-item">
              检查填充的吸收试剂，接通氧气以及动力气，开机待稳定后做检漏试验。
            </li>
            <li class="info-list-item">
              称取标准样品0.01g-1.00g,加入0.8-1.5g钨助溶剂进行测试，连续测试不少于三次，达到标准测量范围，若不能达到，重复三次.
            </li>
            <li class="info-list-item">
              运用单点或者多点校准将标准样品的测试值校准到证书上的标准值。
            </li>
            <li class="info-list-item">
              加入铁助溶剂0.6-1g，钨助溶剂0.8-1.5g,质量1g，测试空白不应该大于0.01%，若不能达到，应该检查坩埚，铁助溶剂钨助溶剂的碳含量，以及氧气纯度，重复上述步骤。
            </li>
            <li class="info-list-item">
              在待测试样中加入铁助溶剂0.6-1g，钨助溶剂0.8-1.5g,输入对应的质量，测试。
            </li>
            <li class="info-list-item">
              每20个样品中至少加入一个标准样品测试，如果不能达标，重新做空白试验，重新测试标样，直至达到证书上的标准值。
            </li>
          </ul>
        </div>
      </div>
      <!-- </div> -->
    </div>
    
    <template #footer>
      <div class="footer">
        <div class="operate">
          <div class="link">
            <span class="material-symbols-outlined">
            add
            </span>
            添加至待送检
          </div>
          <ButtonView size="lg" className="btn" @touchstart="$router.push('/mobile/sample-register')">立即预约</ButtonView>
        </div>
      </div>
    </template>
  </view-page>
</template>

<script setup>
import { reactive } from 'vue'
import ButtonView from '@/components/ButtonView.vue'
// import HeaderView from '@/components/Layout/HeaderView.vue';
import ServiceCard from '@/components/service-card/ServiceCard.vue'

const deviceData = reactive({
  href: 'a',
  name: '热解有机碳',
  org: '北京石油地质实验研究中心',
  icon: 'oil_barrel',
  content: '检测岩石样品中总有机质的百分比含量',
  checkedList: ['CS230碳硫分析仪', '电子天平', 'CS-i碳硫分析仪', '马弗炉'],
  dropdownOpen: false,
})
</script>

<style scoped lang="scss">
.device-view{
  // display: flex;
  // flex-direction: column;
  // height: 100%;
  .bg{
    // position: absolute;
    // top: dpi(10rem);
    // left: 0;
    // width: 100%;
    height: dpi(18rem);
    // background: url('@/assets/images/bg.jpg');
    // background-size: cover;
    // z-index: 0;
  }
  .card{
    padding: 0 dpi(4rem);
    position: relative;
    margin-top: dpi(10rem);
    z-index: 10;
    .fff {
      background-color: #ffffff;
      box-shadow: 0rem dpi(1rem) dpi(3rem) 0rem rgba(5, 32, 77, 0.1);
    }
  }
  .container{
    // flex: 1;
    // overflow: hidden auto;


    .top-view {
      position: relative;
      padding-left: dpi(8rem);
      z-index: 1;
      .img {
        position: absolute;
        right: dpi(4rem);
        top: dpi(-2rem);
        min-width: dpi(19rem);
        height: dpi(36rem);
        > img {
          height: 100%;
        }
      }
    }

    .header-title {
      width: dpi(40rem);
      margin: dpi(10rem) 0 dpi(4rem) 0;
      font-family: PingFangSC-Semibold;
      font-size: dpi(4rem);
      color: #ffffff;
    }
    .desc {
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      color: #7fcfe2;
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: dpi(10rem);
    background-color: #f5f5f5;
    box-shadow: 0rem 0rem dpi(5rem) 0rem rgba(0, 0, 0, 0.15);
  }
}
.info {
  margin-top: dpi(4rem);
  padding: 0 dpi(8rem);
  &-item {
    padding-top: dpi(4rem);
    &:not(&:last-child) {
      padding-bottom: dpi(4rem);
      border-bottom: 1px solid rgba(221, 221, 221, 0.5);
    }
  }
  &-label {
    margin-bottom: dpi(2rem);
    font-family: PingFangSC-Semibold;
    font-size: dpi(2rem);
    color: #05204d;
  }
  &-desc {
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    color: #565656;
    &:not(&:last-child) {
      margin-bottom: dpi(1rem);
    }
    .value {
      color: #0571b0;
    }
  }

  .info-tags {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 4px;

    .tag-item {
      display: flex;
      align-items: center;
      height: dpi(6rem);
      padding: 0 dpi(2rem);
      background-color: rgba(5, 113, 176, 0.05);
      border-radius: 3px;
      font-family: PingFangSC-Medium;
      font-size: dpi(2rem);
      color: #0571b0;
    }
  }

  .info-list {
    padding-left: dpi(2rem);
    list-style: auto;
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    line-height: dpi(3rem);
    color: #565656;
    &-item {
      margin-bottom: dpi(2rem);
    }
  }
}

.btn {
  padding: 0 dpi(5rem);
  height: 100% !important;
}

.operate {
  display: flex;
  align-items: center;
  height: 100%;
  .link {
    display: flex;
    align-items: center;
    margin-right: dpi(5rem);
    font-family: PingFangSC-Medium;
    font-size: dpi(2rem);
    line-height: dpi(3rem);
    color: #0571b0;
    > span {
      margin-right: dpi(1rem);
      font-size: dpi(2rem);
      border: 1px solid #0571b0;
      border-radius: 50%;
    }
  }
}
</style>
